<template>
  <div class="hottes">
    <template v-for="{ coverTitle, recipe: { image, title, contentId }, clientName } in data">
      <div class="new" :key="contentId">
        <h4>{{ coverTitle }}</h4>
        <!-- <h3> { coverTitle } </h3> -->
        <div class="content" :key="contentId" @click="xiangqing(contentId)">
          <img :src="image" />
          <!-- <img v-lazy="src" /> -->
          <div class="word" :key="contentId">
            <h5>{{ title }}</h5>
            <p>作者:&nbsp;&nbsp;{{ clientName }}</p>
          </div>
        </div>
        <div class="tail">
          <span>暂无回答</span>
          <a href=""><span class="iconfont icon-input" id="aaa">写答案</span></a>
        </div>
       <div style="height: 0.8rem;"></div>
      </div>
    </template>
  </div>
</template>

<script>
import axios from 'axios'
// axios.defaults.baseURL = "https://api.hongbeibang.com/question/getHot?";
// import '@/assets/iconfont/iconfont.css'
export default {
  methods: {
    xiangqing(contentId) {
      //window.console.log(e)
      this.$router.push({
        path: '/xq',
        query: {
          lid: contentId
        }
      })
      console.log(contentId)
    }
  },
  data() {
    return {
      data: []
    }
  },
  mounted() {
    // let url = "https://api.hongbeibang.com/question/getHot?_t=1607152689639&pageIndex=0&pageSize=10&all=true&timestamp=1607152689638"
    let url = 'https://api.hongbeibang.com/question/getHot?_t=1607301898513&pageIndex=1&pageSize=10&all=true&timestamp=1607301898512'
    axios.get(url).then(res => {
      let data = res.data.data.content.data
      this.data = data
      console.log(data)
    })
  }
}
</script>
<style lang="scss" scoped>
.new {
  width: 100%;
  border-bottom: 1px solid #e7e2e5;
  margin-top: 10px;
  position: relative;
  top: 100px;
  h4 {
    padding-left: 1px;
  }
  .content {
    width: 100%;
    height: 70px;
    background-color: #f5f7f9;
    border-radius: 4px;
    margin: auto;
    img {
      width: 70px;
      height: 70px;
      float: left;
    }
    .word {
      float: left;
      margin-left: 20px;
      margin-top: 15px;
      p {
        font-size: 12px;
        color: rgb(218, 25, 25);
      }
    }
  }
  .tail {
    width: 100%;
    height: 30px;
    color: blue;
    line-height: 40px;
    #aaa {
      float: right;
      color: orange;
      a {
        color: orange;
      }
    }
  }
}
</style>
